<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" layout="inline">
        <standard-form-row grid>
          <a-row>
            <a-col :xl="8">
              <a-form-item label="列名称:">
                <a-select style="max-width: 268px; width: 100%" mode="multiple" placeholder="全部"></a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="8">
              <a-form-item label="模糊搜索:">
                <a-input placeholder="请输入"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="24" :xl="3">
              <a-row :gutter="20">
                <a-col :span="12">
                  <a-button type="primary">快速搜索</a-button>
                </a-col>
                <a-col :span="12">
                  <a-button type="primary" @click="showDrawer">详细搜索</a-button>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </standard-form-row>
        <standard-form-row grid> </standard-form-row>
      </a-form>
      <a-row>
        <span>共搜索到{{ records }}条</span>
      </a-row>
      <a-row>
        <a-table :columns="columns" :data-source="data">
          <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
            {{ record.description }}
          </p>
        </a-table>
      </a-row>
    </a-card>
    <a-drawer
      title="详细搜索内容"
      :visible="visible"
      :width="300"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form :form="form" layout="vertical" hide-required-mark>
        <a-row>
          <a-form-item label="IP地址:">
            <a-input style="width: 110px; text-align: center" placeholder="192.168.1.1" />
            <a-input
              style="width: 30px; border-left: 0; pointer-events: none; backgroundcolor: #fff"
              placeholder="~"
              disabled
            />
            <a-input style="width: 110px; text-align: center; border-left: 0" placeholder="192.168.1.254" />
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="资产组:">
            <a-select mode="multiple" placeholder="请选择"></a-select>
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="执行反馈:">
            <a-select mode="multiple" placeholder="请选择"></a-select>
          </a-form-item>
        </a-row>

        <a-row>
          <a-form-item label="操作系统:">
            <a-select mode="multiple" placeholder="请选择"></a-select>
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="所属部门:">
            <a-select mode="multiple" placeholder="请选择"></a-select>
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="负责人:">
            <a-select mode="multiple" placeholder="请选择"></a-select>
          </a-form-item>
        </a-row>

        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
          }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose"> Cancel </a-button>
          <a-button type="primary" @click="onClose"> Submit </a-button>
        </div>
      </a-form>
    </a-drawer>
  </page-header-wrapper>
</template>
<script>
import StandardFormRow from '@/components/StandardFormRow/StandardFormRow.vue'
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const data = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: 3,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
  },
]
export default {
  name: 'AssetInventory',
  components: { StandardFormRow },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      records: 922,
      data,
      columns,
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
    },
  },
}
</script>
<style scoped>
</style>
